<template>
  <div class="content">
    <div class="videoBox">
      <video id="videoElement" controls autoplay muted width="100%" height="auto" />
    </div>
    <div class="button-group">
      <div class="outter-circle">
        <div class="inner-parts">
          <i class="el-icon-arrow-up rotate"></i>
        </div>
        <div class="inner-parts">
          <i class="el-icon-arrow-right rotate"></i>
        </div>
        <div class="inner-parts">
          <i class="el-icon-arrow-left rotate"></i>
        </div>
        <div class="inner-parts">
          <i class="el-icon-arrow-down rotate"></i>
        </div>

        <div class="inner-circle">
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import flvjs from 'flv.js'
import { playVideo } from '@/api/cms/monitor/play'
export default {
  data() {
    return {
      flvPlayer: null,
      flvUrl: null,
      // 路由参数
      voh_config: {
        deviceIdentification: '',
        channelId: ''
      }
    }
  },
  activated() {
    // 获取路由参数
    this.voh_config = Object.assign(this.voh_config, JSON.parse(this.$route.query.row))
  },
  mounted() {
    // 获取路由参数
    this.voh_config = Object.assign(this.voh_config, JSON.parse(this.$route.query.row))
    this.initPage()
  },
  methods: {
    play() {
      this.flvPlayer.play()
    },

    initPage() {
      playVideo(this.voh_config).then(res => {
        if (res && res.flv) {
          this.flvUrl = res.flv
          if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement')
            this.flvPlayer = flvjs.createPlayer({
              type: 'flv',
              isLive: true,
              hasAudio: false,
              url: res.flv
            })
            this.flvPlayer.attachMediaElement(videoElement)
            this.flvPlayer.load()
            this.flvPlayer.play()
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .content{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .videoBox{
    width:600px;
    height: 700px;
  }

  .button-group {
    width: 300px;
    height: 300px;
  }
  .outter-circle {
    position: relative;
    margin-left: 10px;
    width: 280px;
    height: 280px;
    border-radius: 100%;
    overflow: hidden;
    transform-origin: center;
    transform: rotate(45deg);
  }
  .inner-parts {
    float: left;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    font-size: 120px;
    font-weight: bold;
  }
  .inner-circle {
    position: absolute;
    margin-top: 70px;
    margin-left: 70px;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    border-radius: 100%;
  }
  .rotate {
    display: inline-block;
    transform: rotate(-45deg);
  }
</style>
